<template>
  <div>
    <CategorySelector style="margin-bottom:10px"></CategorySelector>
    <el-card>
      <div v-if="isShowAttrList">
        <el-button type="primary" :icon="Plus" @click="isShowAttrList = false">添加属性</el-button>
        <el-table :data="attrList" border style="margin-top:10px">
          <el-table-column label="序号" width="80px" type="index" align="center"></el-table-column>
          <el-table-column label="属性名称" prop="attrName"></el-table-column>
          <el-table-column label="属性值列表">
            <template v-slot="{ row }">
              <el-tag v-for="attrValue in row.attrValueList" :key="attrValue.id" :id="attrValue.id" class="ml-2"
                type="success" style="margin-right:6px">{{ attrValue.valueName }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-button title="修改" type="warning" size="small" :icon="Edit" />
              <!-- <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" :icon="InfoFilled" icon-color="#626AEF"
                title="真的确定要删除此条数据么?" @confirm="confirmEvent(row)" @cancel="cancelEvent"> -->
              <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" :icon="InfoFilled" icon-color="#626AEF"
                title="真的确定要删除此条数据么?" @confirm="confirmEvent(row)">
                <template #reference>
                  <el-button title="删除" type="danger" size="small" :icon="Delete" />
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 添加属性 -->
      <div v-else>
        <el-form>
          <el-form-item label="属性名" style="width:300px">
            <el-input v-model="attrInfo.attrName" placeholder="请输入属性名" wdith="200px" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :disabled="!attrInfo.attrName" @click="addAttrValue">添加属性值</el-button>
            <el-button type="default" @click="isShowAttrList = true">取消</el-button>
          </el-form-item>
        </el-form>
        <el-table border :data="attrInfo.attrValueList">
          <el-table-column label="序号" type="index" align="center" width="80px"></el-table-column>
          <el-table-column label="属性值名称">
            <template v-slot="{ row, $index }">
              <el-input size="small" ref="inputRef" v-model="row.valueName" v-if="row.isShowInput"
                @blur="deleteCurrentRow(row, $index)"></el-input>
              <span v-else style="display:inline-block;width:100%" @dblclick="toEditAttrValue(row)">{{
                row.attrValueName
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作"></el-table-column>
        </el-table>
        <el-button type="primary">保存</el-button>
        <el-button type="default" @click="isShowAttrList = true">取消</el-button>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts">
import CategorySelector from '@/components/CategorySelector/index.vue';

export default {
  name: 'Attr',
  components: {
    CategorySelector
  }
};
</script>

<script lang="ts" setup>
import { reactive, ref, watch, nextTick } from 'vue';
import { Plus, Edit, Delete, InfoFilled } from '@element-plus/icons-vue';
import { useCategoryListStore } from '@/stores/categoryList';
import { reqGetAttrListDataByCategory3Id, reqDeleteOneAttr } from '@/api/product/attr'
// import { nextTick } from 'process';

const isShowAttrList = ref<Boolean>(true)

// 定义一个数组来存储属性列表数据
const attrList = ref([]);
// 定义一个变量 为对应输入框 以便于用于获取输入框对象
const inputRef = ref(null);

// 定义一个数组来存放新增数据
const attrInfo = reactive({
  attrName: '', // 需要存储的姓名
  attrValueList: [], // 存储属性值的数组
  categoryLevel: 3, // 等级
  categoryId: -1, // id值
})

// 获取store
const categoryStore = useCategoryListStore();

// 定义一个根据三级导航ID来获取数据的函数
const getAttrListData = async () => {
  let res = await reqGetAttrListDataByCategory3Id({
    category1Id: categoryStore.category1Id,
    category2Id: categoryStore.category2Id,
    category3Id: categoryStore.category3Id
  });
  // console.log('test', res);
  attrList.value = res;
}

// 删除数据
const confirmEvent = async (row: any) => {
  await reqDeleteOneAttr(row.id)

  // 删除成功重新获取数据
  getAttrListData();
};

// 添加属性 即给attrInfo.attrValueList数组中添加内容
const addAttrValue = () => {
  // attrInfo.attrValueList.push({
  //   valueName: '',
  //   attrId: attrInfo.id, // 编辑的时候使用
  //   isShowInput: true // 是否是显示输入框 还是说显示一个span标签
  // })
  attrInfo.attrValueList.push({
    valueName: '',
    attrId: attrInfo.id, // 编辑的时候使用
    isShowInput: true // 是不是显示输入框  还是说显示一个span标签
  });
  // 等页面中的内容渲染完毕后，才来执行里面的业务逻辑
  nextTick(() => {
    inputRef.value?.focus();
  })
}

// 失去焦点
const deleteCurrentRow = (row, index: number) => {
  if (!row.valueName) {
    // 当前没值 则删除当前行
    attrInfo.attrValueList.splice(index, 1);
    return;
  };
  // 如果有值，则失去焦点后要显示span标签 而非el-input
  row.isShowInput = false;
}

// 双击编辑
const toEditAttrValue = (row) => {
  // 让输入框显示出来，这样才能更改数据
  row.isShowInput = true;
  // 要让当前输入框获取焦点
  nextTick(() => {
    inputRef.value?.focus();
  })
}


// 取消删除
// const cancelEvent = () => {

// }

// 监视三级导航,请求响应数据
watch(() => categoryStore.category3Id, (category3Id) => {
  // console.log('ccca', category3Id);
  if (!category3Id) {
    attrList.value = [];
    return
  };
  getAttrListData();
}, { immediate: true });


</script>

<style scoped>

</style>